<script setup lang="ts">
  import { useForm } from '@/hooks/arco/useForm';
  import {
    createBranchBuilding,
    editBranchBuilding,
    deleteBranchBuilding,
  } from '@/api/organization/building';
  import useDetailDrawerBinder from '@/hooks/arco/useDetailDrawerBinder';

  const buildingForm = useForm({
    state: {
      branchId: '',
      buildingId: '',
      name: '',
      status: '',
      floorNum: undefined,
      orders: 0,
      scopeOfUse: undefined,
      minFloor: 1,
      maxFloor: 1,
    },
    rules: {
      name: [
        {
          required: true,
          message: '请输入建筑名称',
        },
      ],
      status: [
        {
          required: true,
          message: '请选择建筑状态',
        },
      ],
      floorNum: [
        {
          required: true,
          message: '请输入建筑层高',
        },
      ],
      scopeOfUse: [
        {
          required: true,
          validator: (_: any, callback: (error?: string) => void) => {
            const { minFloor, maxFloor, floorNum } = buildingForm.state;
            if (minFloor > maxFloor) {
              callback('最小楼层不能大于最大楼层');
              return;
            }

            if (floorNum === undefined) {
              callback('请输入建筑层高');
              return;
            }

            if (maxFloor > floorNum) {
              callback('最大楼层不能大于总楼层');
              return;
            }
            callback();
          },
        },
      ],
    },
  });

  const drawerModal = useDetailDrawerBinder({
    modalName: '建筑',
    deleteApi: () => deleteBranchBuilding(buildingForm.state.buildingId),
    deleteText:
      '提示：建筑内的房间和床位将被删除，设备将被禁用，长者将暂停用药计划并需要重新为其分配床位。',
    onShow(mode, otherParams) {
      buildingForm.clearValidate();
      if (mode === 'add') {
        buildingForm.backToInit();
        buildingForm.state.branchId = otherParams.branchId;
      } else {
        buildingForm.setFieldsValue(otherParams);
      }
    },
    async onOkClick(mode) {
      await buildingForm.validate();
      if (mode === 'add') {
        return createBranchBuilding(buildingForm.state);
      }
      return editBranchBuilding(buildingForm.state);
    },
  });

  defineExpose(drawerModal.expose);
</script>

<template>
  <detail-drawer position="right" v-bind="drawerModal.bindProps">
    <a-form
      :disabled="drawerModal.isShow('detail')"
      v-bind="buildingForm.bindProps"
      layout="vertical"
    >
      <a-row>
        <a-col v-if="drawerModal.isShow('detail')" :span="24">
          <a-form-item field="buildingId" label="建筑ID">
            <a-input v-model="buildingForm.state.buildingId" readonly />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item field="name" label="建筑名称">
            <a-input
              v-model="buildingForm.state.name"
              placeholder="请输入建筑名称"
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="status" label="建筑状态">
            <dict-select
              v-model="buildingForm.state.status"
              type="InstitutionBuildingStatus"
              placeholder="请选择建筑状态"
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="floorNum" label="建筑层高">
            <a-input-number
              v-model="buildingForm.state.floorNum"
              :min="1"
              placeholder="请输入建筑层高"
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="scopeOfUse" label="使用范围">
            <div class="flex gap-2 items-center">
              <a-input-number
                v-model="buildingForm.state.minFloor"
                mode="button"
                :min="1"
                class="flex-1"
              />
              <span>至</span>
              <a-input-number
                v-model="buildingForm.state.maxFloor"
                mode="button"
                :max="buildingForm.state.floorNum"
                class="flex-1"
              />
            </div>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </detail-drawer>
</template>

<style lang="less" scoped></style>
